import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
export function useGsapAnimation(selectors: string, parallaxFactor: number = 0.5) {
	const elements = document.querySelectorAll(selectors);
	gsap.registerPlugin(ScrollTrigger); // 注册 ScrollTrigger 插件
	elements.forEach(selector => {
		// 获取视差滚动的距离，这里假设我们想要元素移动的距离是窗口高度的某个百分比
		//默认单位是px
		const scrollDistance = (selector.clientHeight * parallaxFactor).toFixed(0);
		// 使用 fromTo 方法创建动画
		gsap.fromTo(
			selector, // 目标元素
			{
				//translateY: `-${scrollDistance}px`
				translateY: 0 // 起始位置
			},
			{
				// 当元素滚动出视口时，将其向下移动 scrollDistance
				translateY: `${scrollDistance}px`,
				ease: "none", // 结束时也无缓动
				scrollTrigger: {
					trigger: selector, // 触发动画的元素
					start: "top top", // 元素滚动到视口时开始动画
					end: `+=${scrollDistance}px`, // 元素滚动到视口时结束动画
					// pin: true, //固定元素的位置，防止滚动时元素位置变化
					scrub: 0.8 // 滚动时重设动画的流畅程度，使动画与滚动速度同步
					// fastScrollEnd: false // 滚动时，元素是否会立即到达终点
				}
			}
		);
	});
}
